import { Toast, NavBar } from 'react-vant';
import { useNavigate } from 'react-router-dom'
import { Form, Input, Button, message } from 'antd';
import { getSvg, getAddLogin, getUpdateId, getloginREN } from '../../api/api';
import React from "react";
import { useState, useEffect } from 'react'
import { Dialog } from 'antd-mobile'
import './Login.css'
import { Tabs, } from 'react-vant';
import { Qr, } from '@react-vant/icons';

interface propsRegister {
    data?:any
}
export default function Register(props: propsRegister) {
    let navigate = useNavigate()
    const [second, setSecond] = useState<number>(3);
    const [yanName, setYanName] = useState<any | number>('验证码');
    const [isActive, setIsActive] = useState<boolean>(false);
    const [isShow, setIsShow] = useState<boolean>(true);
    const [code, setCode] = useState<any>()
    const [userlist, setUserlist] = useState([])
    const getSvgCode = () => {
        async function svgS() {
            let { data: { code, msg, info, userlist } } = await getSvg(undefined);
            setUserlist(userlist)
            if (code == 200) {
                setCode(info.data)
            }
        }
        svgS()
    }

    const getYan = (event: React.MouseEvent<HTMLButtonElement>) => {
        setIsActive(true);
    }
   

    const [form] = Form.useForm(); // 创建一个 Form 实例  
    // 提交表单的处理函数  
    const onFinish = (values: { username: string; password: string, seconds: string }) => {
        // 这里可以执行注册请求，例如发送到服务器  
        let addfrom ={phone:values.username,password:values.password,seconds:values.seconds}
        // 假设注册成功，给用户一个反馈  
        async function names() {
            
            let {data:{code,msg}}=await getAddLogin(addfrom)
            if(code==200){
                message.success('注册成功')
                navigate('/login')
                form.resetFields(); // 提交成功后重置表单  
            }else{
                message.error(msg)
            }
        }
        names() 

    };
    useEffect(() => {
        let interval = null as any
        if (isActive && second > 0) {
            interval = setInterval(() => {
                setSecond(prevSeconds => prevSeconds - 1);
                setYanName(second)
            }, 1000)
        }
        else if (second == 0) {
            clearInterval(interval)
            setYanName('发验证码')
            setSecond(3)
            getSvgCode()//图片验证码的调用
            setIsActive(false)

        }
        return () => clearInterval(interval);


    }, [isActive, second, isShow])
    return (
        <div>
            <NavBar
                title="注册账号"
                leftText="返回"
                rightText="按钮"
                onClickLeft={() => navigate('/login')}
                onClickRight={() => Toast('按钮')}
            />
            <div style={{ maxWidth: 400, margin: 'auto', padding: '50px' }}>

                <Form
                    form={form}
                    name="register"
                    onFinish={onFinish}
                    layout="vertical"
                >
                    <Form.Item
                        name="username"
                        label="用户名"
                        rules={[{ required: true, message: '请输入用户名!' }]}
                    >
                        <Input placeholder="请输入用户名" />
                    </Form.Item>
                    <div style={{ display: 'flex' }}>
                        <Form.Item
                            name="seconds"
                            label="验证码"
                            rules={[{ required: true, message: '请输入4位验证码!' }]}
                            style={{ width: '20rem' }}
                        >
                            <Input placeholder="请输入4位验证码" />
                        </Form.Item>
                        <button onClick={getYan} style={{ width: '9rem', marginLeft: '3rem', backgroundColor: 'RGB(100,150,234)', color: 'white', border: 'none', borderRadius: '0.4rem', fontSize: '1.4rem', height: '3.7rem', marginTop: '3.6rem' }}>
                            {yanName == '发验证码' ? <div dangerouslySetInnerHTML={{ __html: code }} ></div> : <span>{yanName}</span>}
                        </button>
                    </div>

                    <Form.Item
                        name="password"
                        label="密码"
                        rules={[
                            { required: true, message: '请输入密码!' },
                            {
                                min: 6,
                                message: '密码至少为 6 个字符!',
                            },
                            {
                                validator: (_, value) => {
                                    // 密码规则：至少包含一个数字、一个字母和一个特殊字符  
                                    const passwordRegEx = /^(?=.*[a-zA-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{6,}$/;
                                    if (!value || passwordRegEx.test(value)) {
                                        return Promise.resolve();
                                    }
                                    return Promise.reject(new Error('密码必须至少包含一个字母、一个数字和一个特殊字符!'));
                                },
                            }
                        ]}
                    >
                        <Input.Password placeholder="请输入密码" />
                    </Form.Item>
                    <Form.Item>
                        <Button type="primary" htmlType="submit" block>
                            注册
                        </Button>
                    </Form.Item>
                </Form>
            </div>
        </div>
    )
}